.mobile{
    position: relative;
}
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: transparent;
    .functional_domain{
        justify-content: space-between;
        align-items: center;
        margin: 0;
        height: 50px;
        .back,.more{
            display: block;
            width: 25px;
            height: 25px;
            line-height: 25px;
            font-size: 25px;
        }
        .back{
            margin: 0 15px 0 10px;
            color: #fff;
        }
        .more{
            margin: 0 10px 0 20px;
            font-size: 30px;
            width: 30px;
            height: 30px;
            color: #fff;
            line-height: 30px;
        }

        .occupying_area{
            flex: 1;
            height: 50px;
            overflow: hidden;
            position: relative;
            ul{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100px;
                li{
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                    color: #fff;
                }
                .scroll_bottom{
                    align-items: center;

                    .poster_s{
                        margin-left: 10px;
                        height: calc(100%-30px);
                        border-radius: 5px;
                        overflow: hidden;
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                        img{
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .info{
                        flex: 1;
                        flex-direction: column;
                        justify-content: center;
                        align-content: flex-start;
                        margin-left: 10px;
                        .name{
                            margin-bottom: 2px;
                            text-align: left;
                            line-height: 1;
                            font-size: 14px;
                            font-weight: 600;
                        }
                        .rating_num{
                            color: rgba(255, 255, 255, 0.5);
                            font-size: 10px;
                        }
                        .no_rating{
                            color: rgba(255, 255, 255, 0.5);
                            font-size: 10px;
                        }
                    }
                }
            }
        }
    }
}

main{
    overflow-x: hidden;
    padding: 50px 0 0;
    section.movieInfo{
        padding: 15px;
        box-sizing: border-box;
        width: 100%;
        justify-content: space-between;
        align-items: flex-start;
        .posterArea{
            width: 30%;
            margin-right: 15px;
            border-radius: 5px;
            overflow: hidden;
            img.poster{
                width: 100%;
                height: 100%;
            }
            filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.3));
        }
        .info{
            width: 70%;
            flex-direction: column;
            align-content: flex-start;
            justify-content: flex-start;
            .hd{
                margin-top: 5px;
                color: #fff;
                h1{
                    font-size: 23px;
                    letter-spacing: 1px;
                }
                .year{
                    margin-top: 5px;
                    font-size: 14px;
                    font-weight: 600;
                }
            }
            .mid{
                margin: 10px 0;
                span.container{
                    word-wrap: break-all;
                    font-size: 12px;
                    color: rgba(255, 255, 255, 0.5);
                    span{
                        display: inline;
                        line-height: 1;
                    }
                    span.iconfont{
                        font-size: 12px;
                        line-height: 12px;
                        color: rgba(255, 255, 255, 0.5);
                    }
                }
            }
            .bd{
                flex: 1;
                justify-content: space-between;
                align-items: top;
                div{
                    width: calc((100% - 9px) / 2);
                    height: 35px;
                    background: #fff;
                    border-radius: 5px;
                    text-align: center;
                    span.iconfont{
                        width: 15px;
                        height: 35px;
                    }
                    span{
                        display: inline-block;
                        line-height: 35px;
                        font-size: 14px;
                        font-weight: 600;
                        vertical-align: middle;
                    }
                }
                .wantToSee span.iconfont{
                    background: url('../img/icon/want_to_see_yellow-s.png') no-repeat center / contain;
                }
                .seen span.iconfont{
                    background: url('../img/icon/seen_yellow-s.png') no-repeat center / contain;
                }
            }
        }
    }

    // 星级和评分
    section.ratingArea{
        margin: 5px 15px 20px;
        padding: 10px 15px;
        background: rgba(0, 0, 0, 0.25);
        // height: 100px;
        border-radius: 10px;
        
        .container{
            flex-direction: column;
            align-content: flex-start;

            .hd{
                width: 100%;
                justify-content: space-between;
                align-items: center;
                span.reg{
                    color: #fff;
                    font-size: 12px;
                    span{
                        font-size: 12px;
                    }
                }
                span.iconfont{
                    font-size: 13px;
                    color: rgba(255, 255, 255, 0.5);
                    width: 13px;
                    height: 13px;
                }
            }
            .mid{
                margin: 10px 0;
                align-items: flex-start;
                flex-direction: column;
                .ratingBox{

                    width: 100%;
                    .rating{
                        width: 30%;
                        flex-direction: column;
                        // margin-left: 30px;
                        
                        .rating_num{
                            font-size: 30px;
                            color: #fff;
                            line-height: 1;
                            margin: 0 auto 5px;
                        }
                        .rating_stars{
                            height: 12px;
                            line-height: 12px;
                            .rating_stars_item{
                                width: 12px;
                                height: 12px;
                            }
                        }
                    }
                    .rating_stars_chart{
                        // margin-left: 10px;
                        margin-right: 20px;
                        flex: 1;
                        flex-direction: column;
                        .star_stats{
                            position: relative;
                            justify-content: flex-end;
                            align-items: center;
                            width: 100%;
                            .stats_wrap{
                                display: inline-block;
                                margin-right: 8px;
                                margin-bottom: 1px;
                                line-height: 10px;
                                vertical-align: middle;
                                .rating_star_icon{
                                    margin: 0 -2px;
                                    display: inline-block;
                                    width: 8px;
                                    height: 8px;
                                    background-size: cover;
                                    background-image: url('../img/icon/star.png');
                                }
                            }
                            .chart_wrap{
                                display: inline-block;
                                margin-bottom: 1px;
                                position: relative;
                                z-index: 0;
                                width: 75%;
                                height: 6px;
                                background: rgba(255,255,255,0.2);
                                border-radius: 3px;
                                vertical-align: middle;
                                .rating_progress{
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    z-index: 1;
                                    display: inline-block;
                                    background: #fe9900;
                                    height: 6px;
                                    border-radius: 3px;
                                }
                            }
                        }
                    }
                }
                .votesArea{
                    margin-top: 3px;
                    width: 100%;
                    text-align: right;
                    
                    font-size: 0.625rem;
                    color: rgba(255,255,255,0.2);
                    span.votes{
                        margin-right: 20px;
                    }
                }
            }
            .bd{
                padding-top: 3px;
                border-top: 0.05rem solid rgba(255, 255, 255, 0.2);
                color: rgba(255, 255, 255, 0.2);
                text-align: left;
                .seen_num,.wantToSee_num{
                    font-size: 0.625rem;
                    margin-right: 20px;
                }
            }
        }
        // 暂无评分
        .container.no_rating{
            padding: 15px;
            .mid{
                margin: 0;
                .ratingBox{
                    .rating{
                        justify-content: center;
                        margin: 0;
                        width: 40%;
                        span{
                            margin: 0;
                            font-size: 12px;
                            color: rgba(255, 255, 255, 0.5);
                        }
                        span:last-child{padding-bottom: 10px;}
                        .hd{
                            margin-bottom: 15px;
                            padding: 0;
                            justify-content: flex-start;
                            span.reg{
                                margin: 0;
                                color: #fff;
                                span{color: #fff;}
                            }
                        }
                        .rating_num{margin-bottom: 10px;}
                        a{
                            font-size: 13px;
                            color: #fff;
                        }
                    }
                    .rating_stars_chart{
                        flex: 1;
                        position: relative;
                        margin: 0;
                        align-items: center;
                        justify-content: center;
                        color: #fff;
                    }
                    .rating_stars_chart::before{
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 0;
                        height: 100%;
                        border-left: 1px solid rgba(255, 255, 255, 0.5);
                    }
                }
            }
        }
    }

    // 选座购票
    section.ticketPurchase{
        padding: 15px;
        .hd{
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 0.05rem solid rgba(255, 255, 255, 0.2);
            .title{
                align-items: center;
                font-size: 18px;
                font-weight: 600;
                color: #fff;
                span.iconfont{
                    display: block;
                    margin-right: 15px;
                    width: 30px;
                    height: 30px;
                    background: url('../img/icon/cinema_ticket.png') center center / cover no-repeat;
                }
            }
            .all_more{
                align-items: center;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.5);
                line-height: 13px;
                span.platform{
                    display: block;
                    margin-right: 10px;
                    width: 25px;
                    height: 25px;
                    background: url('../img/icon/maoyan.png') center center / cover no-repeat;
                }
                span.iconfont{
                    display: block;
                    width: 13px;
                    height: 13px;
                    font-size: 13px;
                    line-height: 13px;
                    color: rgba(255, 255, 255, 0.5);
                }
            }
        }
    }


    // 简介 演职员  预告片/剧照  短评  喜欢这部电影的人也喜欢 头部公有部分
    section.introduction,section.castMembers,section.trailerStills,section.shortComments,section.guess_you_like{
        padding: 15px;
        .hd{
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            .title{
                font-size: 18px;
                font-weight: 600;
                color: #fff;
            }
            .all_more{
                font-size: 12px;
                color: rgba(255, 255, 255, 0.5);
                line-height: 13px;
                span.iconfont{
                    display: inline;
                    width: 13px;
                    height: 13px;
                    font-size: 13px;
                    line-height: 13px;
                    color: rgba(255, 255, 255, 0.5);
                }
            }
        }
    }

    // 简介
    section.introduction{
        .hd{
            margin-bottom: 10px;
            .title{
                font-size: 18px;
                font-weight: 600;
                color: #fff;
            }
        }
        .bd{
            .long_text{
                margin: 0;
                line-height: 1.5;
                font-size: 15px;
                color: #fff;
            }
            .show{color: rgba(255, 255, 255, 0.5);}

            .complaint{
                margin-top: 5px;
                text-align: right;
                span{
                    font-size: 0.725rem;
                    line-height: 12px;
                    color: rgba(255,255,255,0.2);
                }
            }
        }
    }

    // 演职员
    section.castMembers{
        padding: 15px 0;
        padding-bottom: 30px;
        &>.hd{
            margin-left: 15px;
            margin-right: 15px;
        }
        .bd{
            .container{
                position: relative;
                padding: 0 15px;
                margin: 0;
                font-size: 0;
                border-top: none;
                overflow-x: auto;
                white-space: nowrap;
                .member_item{
                    position: relative;
                    box-sizing: border-box;
                    margin-right: 10px;
                    display: inline-block;
                    width: calc((100% - 25px) / 3);
                    .hd{
                        position: relative;
                        overflow: hidden;
                        .size_cover{
                            position: relative;
                            border-radius: 6px;
                            overflow: hidden;
                            .img{
                                padding-top: 140%;
                                background: url('../img/file-cover.jpg') center center / cover no-repeat;
                                border-radius: 6px;
                            }
                            .size_cover_background{
                                position: absolute;
                                top: 0;
                                left: 0;
                                bottom: 0;
                                right: 0;
                                z-index: 1;
                                width: 100%;
                                height: 100%;
                                background: url('../img/pc_hotMovie_newest_p2_01.jpg') center center / cover no-repeat;
                                border-radius: 6px;
                                overflow: hidden;
                            }
                        }
                        .size_cover::after{
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            border: 1px solid rgba(0, 0, 0, 0.12);
                            box-sizing: border-box;
                            width: 200%;
                            height: 200%;
                            transform: scale(.5) translateX(-.5px) translateY(-.5px);
                            transform-origin: left top;
                            pointer-events: none;
                        }
                    }
                    .bd{
                        .name{
                            margin-bottom: 2px;
                            font-size: 14px;
                            font-weight: 600;
                            color: #fff;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .role{
                            font-size: 12px;
                            color: rgba(255, 255, 255, 0.5);
                        }
                    }
                }
                .member_item:last-child{margin-right: 0;}
            }
            .container::-webkit-scrollbar{display: none;}
        }
    }

    // 预告片 / 剧照
    section.trailerStills{
        padding: 15px 0;
        padding-bottom: 30px;
        &>.hd{
            margin-left: 15px;
            margin-right: 15px;
        }
        .bd{
            border-radius: 6px;
            .container{
                position: relative;
                padding: 0 15px;
                overflow-x: auto;
                white-space: nowrap;
                    a{
                        display: inline-block;
                        width: calc(100% - 28px);
                        height: 160px;
                        img{
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            // object-position: 50% 50%;
                        }
                    }
                    a:first-child{
                        position: relative;
                        img{
                            border-top-left-radius: 6px;
                            border-bottom-left-radius: 6px;
                        }
                        span.playBtn{
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            margin: auto;
                            display: block;
                            width: 40px;
                            height: 40px;
                            background-image: url('../img/icon/movie_play.svg');
                            background-position: center center;
                            background-size: contain;
                            background-repeat: no-repeat;
                        }

                        span.tag{
                            position: absolute;
                            top: 5px;
                            left: 5px;
                            margin: auto;
                            display: block;
                            padding: 5px;
                            font-size: 12px;
                            color: #fff;
                            border-radius: 3px;
                            line-height: 12px;
                            background: #fe9900;
                        }

                        span.time{
                            position: absolute;
                            right: 5px;
                            bottom: 5px;
                            margin: auto;
                            display: block;
                            padding: 5px;
                            font-size: 12px;
                            color: #fff;
                            border-radius: 3px;
                            line-height: 12px;
                        }
                    }
                    a:last-child{
                        img{
                            border-top-right-radius: 6px;
                            border-bottom-right-radius: 6px;
                        }
                    }
            }
            .container::-webkit-scrollbar{display: none;}
            
        }
    }

    // 短评
    section.shortComments{
        margin: 15px;
        border-radius: 9px;
        background: rgba(0, 0, 0, 0.25);
        .hd{
            .title span.iconfont{
                display: inline-block;
                font-size: 16px;
                width: 16px;
                height: 16px;
                line-height: 16px;
                color: #fff;
            }
        }
        .bd{
            .comment_item{
                padding: 20px 0 15px 0;
                border-bottom: 0.05rem solid rgba(255, 255, 255, 0.2);
                .userInfo{
                    justify-content: space-between;
                    align-items: center;
                    .avatar{
                        margin-right: 10px;
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        overflow: hidden;
                        img{
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .info{
                        flex: 1;
                        .username{
                            font-size: 15px;
                            font-weight: 600;
                            color: #fff;
                        }
                        .bottom{
                            padding: 2px 0;
                            align-items: center;
                            .rating{
                                .rating_stars{
                                    height: 10px;
                                    .rating_stars_item{
                                        width: 10px;
                                        height: 10px;
                                    }
                                }
                            }
                            .releasedTime_area{
                                padding-left: 5px;
                                font-size: 0.725rem;
                                line-height: 1;
                                color: rgba(255, 255, 255, 0.5);
                            }
                        }
                    }
                    .more{
                        span.iconfont{
                            font-size: 30px;
                            width: 30px;
                            height: 30px;
                            line-height: 30px;
                        }
                    }
                }

                .long_text{
                    margin: 15px 0;
                    font-size: 14px;
                    color: #fff;
                    line-height: 1.3;
                }
                .show{color: rgba(255, 255, 255, 0.5);}

                .thumbsUp{
                    span.iconfont{
                        display: inline-block;
                        color: rgba(255, 255, 255, 0.5);
                        font-size: 14px;
                    }
                    span{
                        font-size: 12px;
                        color: rgba(255, 255, 255, 0.5);
                    }
                }
                .thumbsUp.yes{
                    span.iconfont{color: #00bb30;}
                }
            }
            .end{
                margin-top: 15px;
                justify-content: space-between;
                span{
                    font-size: 14px;
                    color: #fff;
                }
                span.iconfont{
                    color: rgba(255, 255, 255, 0.5);
                }
            }
        }
    }

    // 喜欢这部电影的人也喜欢
    section.guess_you_like{
    }

    // 影评 和 讨论
    div.film_review{
        width: 100%;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        background: #f7f7f7;
        .review_container{
            width: 100%;
        }
        .main{
            width: 100%;
            ul{
                position: relative;
                width: 200%;
                transition: left 0.2s ease;
                // left: -390px;
                li{
                    flex-shrink:0;
                    width: 50%;
                    overflow-x: hidden;
                    overflow-y: scroll;
                }
                .head{
                    align-items: center;
                    justify-content: space-between;
                    padding: 10px 15px;
                    div{
                        font-size: 12px;
                    }
                    .tagSwitch{
                        height: 25px;
                        width: 105px;
                        border-radius: 5px;
                        background: #eee;
                        position: relative;
                        .container{
                            position: absolute;
                            top: 0;
                            left: 0;
                            z-index: 2;
                        }
                        .tag{
                            padding: 0 5px;
                            height: 25px;
                            line-height: 25px;
                        }
                        .moveBox{
                            height: 23px;
                            width: 33px;
                            border-radius: 5px;
                            border: 1px solid #818181;
                            background: #fff;
                            transition: left 0.3s ease;
                            position: absolute;
                            top: 0;
                            left: 0;
                            z-index: 1;
                        }
                    }
                }
                .reviewList{
                    .main{
                        .reviewItem{
                            width: 100%;
                            box-sizing: border-box;
                            padding: 15px;
                            margin-bottom: 10px;
                            background: #fff;
                            .userInfo{
                                margin-bottom: 10px;
                                .user{
                                    margin-right: 15px;
                                    .avatar{
                                        display: inline-block;
                                        width: 20px;
                                        height: 20px;
                                        border-radius: 50%;
                                        overflow: hidden;
                                        vertical-align: middle;
                                        img{
                                            width: 100%;
                                            height: 100%;
                                        }
                                    }
                                    .name{
                                        display: inline-block;
                                        font-size: 12px;
                                        color: #818181;
                                        vertical-align: middle;
                                    }
                                }
                                .rating{
                                    flex: 1;
                                    .status{
                                        font-size: 10px;
                                    }
                                }
                                .releasedTime{
                                    font-size: 12px;
                                    color: #aaa;
                                }
                            }
                            .content{
                                .title{
                                    font-size: 15px;
                                    font-weight: 600;
                                    line-height: 1.5;
                                }
                                .text{
                                    font-size: 12px;
                                    color: rgba(0, 0, 0, 0.8);
                                    line-height: 1.5;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 3;
                                    white-space: normal;
                                    word-wrap: break-word;
                                    overflow: hidden;
                                }
                            }
                        }
                    }
                }
                .discussList{
                    .main{
                        .discussItem{
                            padding: 0 15px;
                            .topic_heat{
                                padding: 15px 0;
                                width: 18%;
                                flex-direction: column;
                                align-items: center;
                                span.iconfont{
                                    display: inline-block;
                                    width: 20px;
                                    height: 20px;
                                    background-position: top;
                                    background-size: contain;
                                    background-repeat: no-repeat;
                                }
                                span.iconfont.reply0{background-image: url('../img/icon/ic_reply0.png');}
                                span.iconfont.reply50{background-image: url('../img/icon/ic_reply50.png');}
                                span.iconfont.reply100{background-image: url('../img/icon/ic_reply100.png');}
                                span.iconfont.reply500{background-image: url('../img/icon/ic_reply500.png');}
                                span.number{
                                    font-size: 12px;
                                    color: #aaa;
                                }
                            }
                            .content{
                                flex: 1;
                                flex-direction: column;
                                padding: 15px 0;
                                border-bottom: 1px solid #aaa;
                                .title{
                                    font-size: 15px;
                                    font-weight: 500;
                                    line-height: 1.5;
                                }
                                .userInfo{
                                    margin-top: 5px;
                                    span{
                                        display: inline-block;
                                        vertical-align: middle;
                                    }
                                    .avatar{
                                        width: 20px;
                                        height: 20px;
                                        border-radius: 50%;
                                        overflow: hidden;
                                        img{width: 100%;height: 100%;}
                                    }
                                    .name{margin-right: 10px;}
                                    .name,.time{
                                        font-size: 12px;
                                        color: #aaa;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.fixed{
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 1;
}
.film_review_head{
    // 模块切换
    .module_switch{
        position: relative;
        margin: 0 15px;
        padding-top: 10px;
        border-bottom: 1px solid #e0e0e0;
        
        a{
            display: block;
            padding: 10px 0;
            padding-right: 35px;
            color: #818181;
            font-size: 14px;
        }
        .current{
            color: #000;
        }

        .afterSlider{
            display: block;
        }
    }
    .module_switch:after{
        content: '';
        position: absolute;
        top: 5px;
        left: 0;
        right: 0;
        margin: auto;
        width: 35px;
        height: 5px;
        border-radius: 5px;
        background: rgb(159, 158, 158);
    }
}

footer{
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}